import { Button, Space, Tag } from 'ant-design-vue'
import { omitBy } from 'lodash-unified'
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

import { roleApi } from '@/apis'
import { ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { TableOptions, useTableRef } from '@/hooks'

import { useOperation, useToolbar } from './hooks'

export default defineComponent({
  name: 'RoleAuthView',
  setup() {
    const selectedIds = ref(new Set<string>())
    const tableConfig = ref({
      border: true,
      loading: false,
      toolbarConfig: {
        custom: true,
        refresh: true,
        zoom: true,
        slots: {
          buttons: 'toolbar_buttons'
        }
      },
      formConfig: {
        items: [
          {
            field: 'userName',
            title: '用户名称',
            itemRender: {
              name: TABLE_ITEM_RENDER.AInput,
              props: {
                placeholder: '请输入用户名称'
              }
            }
          },
          {
            field: 'phone',
            title: '手机号',
            itemRender: {
              name: TABLE_ITEM_RENDER.AInput,
              props: {
                placeholder: '请输入手机号'
              }
            }
          },
          {
            itemRender: {
              name: TABLE_RENDERER.FormItemBtns
            }
          }
        ]
      },
      columns: [
        { type: 'checkbox', width: 50 },
        {
          field: 'userName',
          title: '用户名称'
        },
        {
          field: 'nickName',
          title: '用户昵称'
        },
        {
          field: 'email',
          title: '邮箱'
        },
        {
          field: 'phone',
          title: '手机'
        },
        {
          field: 'status',
          title: '状态',
          slots: {
            default: 'status'
          }
        },
        {
          field: 'createTime',
          title: '创建时间',
          formatter: TABLE_FORMAT.Date
        },
        {
          title: '操作',
          slots: {
            default: 'operation'
          }
        }
      ],
      pagerConfig: {
        pageSize: 15
      },
      proxyConfig: {
        seq: true,
        form: true,
        props: {
          result: 'list',
          total: 'total'
        },
        ajax: {
          query: async ({ page, form }) => {
            form = processingData(form)

            const data = await roleApi.getRoleAuthPage(
              route.params.id as string,
              {
                pageSize: page.pageSize,
                pageNum: page.currentPage,
                ...form
              }
            )
            return data
          }
        }
      },
      onCheckboxChange({ checked, row }) {
        checked
          ? selectedIds.value.add(row.infoId)
          : selectedIds.value.delete(row.infoId)
      }
    } as TableOptions)

    const route = useRoute()
    const tableRefHook = useTableRef(tableConfig)

    const operationHook = useOperation({ tableRefHook })
    const toolbarHook = useToolbar()

    function processingData(data: any) {
      data = omitBy(data, value => {
        return value === null
      })

      return data
    }

    return {
      selectedIds,
      tableRef: tableRefHook.tableRef,
      tableConfig,
      ...operationHook,
      ...toolbarHook
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            toolbar_buttons: () => (
              <Space>
                <Button type={'primary'} ghost>
                  添加用户
                </Button>
                <Button danger ghost disabled={this.selectedIds.size === 0}>
                  批量取消授权
                </Button>
                <Button type={'primary'} ghost onClick={this.handleClose}>
                  关闭
                </Button>
              </Space>
            ),
            status: ({ row }) =>
              row.status === '1' ? (
                <Tag color={'red'}>停用</Tag>
              ) : (
                <Tag color={'blue'}>正常</Tag>
              ),
            operation: ({ row }) => (
              <Space size={'small'}>
                <Button
                  type={'link'}
                  size={'small'}
                  onClick={() => this.handleCancelAuth(row.userId)}
                >
                  取消授权
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
